<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    

















    <!-- <button>这是一个按钮</button> -->

    <!-- <div class = "one">
        hello one
    </div>

    <div id="two">
        hello two
    </div>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccd</li>
        <li>ddd</li>
    </ul> -->





    <!-- <div id = "screen"> 
        <ul>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
        </ul>
    </div>

    <button id = "btn">这是获取内容按钮</button>
    <button id = "btn2">这是修改内容按钮</button> -->




   <div id = "screen">
       0

   </div>

   <button id = "puls" > + </button>

    <script>
        let pulsBtn = document.querySelector('#puls');
       

        pulsBtn.onclick = function() {
            //1. 获取 screen 里面的值
            let screen = document.querySelector('#screen');
            let val =screen.innerHTML;
            val = parseInt(val);
            //2.把这个值加 1
            val = val + 1;
            //3.把这个值写回去
            screen.innerHTML = val;

        }








        // let btn = document.querySelector('#btn');
        // btn.onclick = function() {
        //     let screen = document.querySelector('#screen');
        //     console.log(screen.innerHTML);
        // }
    
        // let btn2 = document.querySelector('#btn2');
        // btn2.onclick = function() {
        //     let screen = document.querySelector('#screen');
        //     screen.innerHTML = '<h1>修改后的内容<h1>';
            
        // }











        // let button = document.querySelector('button');
        // button.onclick = function() {
        //     alert('hello');
        // }
        //querSelector 参数就是一个css的 选择器
        // let div = document.querySelector('.one');
        // console.log(div);

        // let obj = document.querySelector('#two')
        // console.log(obj);

        //当 querSelector 的参数选择器,匹配到了多个元素的时候
        //此时返回的对象,就是匹配结果中的第一个的元素
        //  let obj = document.querySelector('ul li');
        //  console.log(obj);

        //  let obj1 = document.querySelectorAll('ul li');//全部访问到
        //  console.log(obj1);

        






        // let student =  {
        //     name: '蔡徐坤',
        //     age: 20,
        //     height: 180, 
        //     weight: 
        //     120,

        //     sing: function() {
        //         console.log("基尼太美");
        //     },
        //     jump: function() {
        //         console.log("一段舞蹈");
        //     },
        
        // };
        // console.log(student.name);
        // console.log(student.age);
        // student.sing();




    //     // 作用域
    //     //在 JS里面,{}内部的代码,可以访问到{}外部的变量的~
    //    let num = 10;
    //    function hello2() {
    //        function hello() {
    //            console.log(num);
    //        }
    //        hello();
    //    }
    //    hello2();
       // 作用域链: JS的作用域中是支持 逐级向上 查找的
       //当前 是在hello 中,没有 num 变量  
       //于是就往上级找,扎到了 hello2 这里
       //但是在hello2 里,也没有 num,于是继续往上找,找到了全局作用域,找到了num

        



       
        
        // let f = hello;
        // f();
        //hello 是一个函数名,后面没有()说明不是函数调用
        //只是一个单纯函数的赋值,f 是function类型的变量
        // console.log(typeof f);

        // s 
        //没有被传参传到的形参,就是undefined;
        

        // function add(x,y) {//function 函数 add 函数名
        //     return x+y;//返回主
        // }
        // let result = add(10,20);//调用
        // console.log(result);

        // result = add('hello','world');//传入的类型任意
        // console.log(result);

        // result = add('hello',10);
        // console.log(result);
        


        // function hello() {
        //     console.log('hello');
        // }
        // hello();
    </script>
</body>
</html>